<template>
    <div>
        <div class="ui relaxed divided list">
            <div class="item" v-for="(item, index) in friends" :key="index">
                 <div class="img-con">
                    <img src="/static/img/user/molly.png" alt="molly.png">
                </div>
                <div class="content">
                    <a class="header">Semantic-Org/Semantic-UI</a>
                    <div class="description">Updated 10 mins ago</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {api_account} from '@/api'
export default {
    data () {
        return {
            friends: []
        }
    },
    mounted () {
        this.getFriends()
    },
    methods: {
        getFriends () {
            this.$http({
                url: api_account + '/friend/all',
                methods: 'get'
            })
            .then(res => {
                console.log(res, 'friends')
                this.friends = res.data.data
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
$header_icon_size = 40px

.img-con
    width $header_icon_size
    height $header_icon_size
    border-radius ($header_icon_size / 2)
    overflow hidden
    display inline-block
    vertical-align middle
    img
        width 100%
        height 100%
</style>
